<template>
  <div class="app">
    <TopBack title="已消费"></TopBack>
    <div class="top">
      <p style="text-align: center; margin: 0">
        <span v-if="payOrno == 'false'"> 您的订单未付款，请点击确认付款</span>
        <span v-else> 您的订单已消费，期待您再次预定哦</span>
      </p>
      <div class="yuding">
        <van-row>
          <van-col span="12" class="jiange">
            <van-button
              type="primary"
              v-if="payOrno == 'false'"
              color="#fff"
              @click="payyes"
              >立即付款</van-button
            >
            <van-button type="primary" v-else color="#fff">再次预定</van-button>
          </van-col>
          <van-col span="12">
            <van-button
              type="primary"
              color="#fff"
              v-if="payOrno == 'false'"
              @click="nofind"
              >取消订单</van-button
            >
            <van-button type="primary" color="#fff" v-else @click="refund"
              >退款</van-button
            >
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="money">
      <van-row>
        <van-col span="6" class="pay">在线支付</van-col>
        <van-col span="18" style="color: red">￥{{ money }}</van-col>
      </van-row>
    </div>
    <div class="fapiao">
      <van-row>
        <van-col span="6" class="pay">发票报销</van-col>
        <van-col span="18">未预约酒店开票</van-col>
      </van-row>
    </div>
    <div class="serve">
      <div class="hotelName">
        <van-row>
          <van-col span="18" class="title">{{ hotelName }}</van-col>
          <van-col span="6">酒店详情</van-col>
        </van-row>
        <p>{{ adress }}</p>
        <van-row class="tubiao">
          <van-col span="12">
            <img src="../../assets/image/xiangqing/地图导航-14.png" /> &nbsp;
            <span>地图/导航</span>
          </van-col>
          <van-col span="12">
            <img src="../../assets/image/xiangqing/联系商家.png" /> &nbsp;<span
              >联系商家</span
            >
          </van-col>
        </van-row>
        <hr />
        <div class="serve">
          <div>{{ roomName }}</div>
          <p class="servesmill">
            大床 &nbsp;|&nbsp;{{ breakfast }}早餐&nbsp;|&nbsp;
            {{ serveName.area }}&nbsp;|&nbsp;{{ smoke }}吸烟&nbsp;|&nbsp;{{
              smoke
            }}WiFi
          </p>
        </div>
        <div class="people">
          <van-row>
            <van-col span="6" class="pay">入住人</van-col>
            <van-col span="18">{{ username }}</van-col>
          </van-row>
          <van-row>
            <van-col span="6" class="pay">联系手机</van-col>
            <van-col span="18">{{ usertel }}</van-col>
          </van-row>
        </div>
      </div>
    </div>
    <div class="message">
      <p>订单信息</p>
      <van-row>
        <van-col span="6" class="pay">订单号</van-col>
        <van-col span="18">123431087015013408605</van-col>
      </van-row>
      <van-row>
        <van-col span="6" class="pay">下单时间</van-col>
        <van-col span="18">{{ time }}</van-col>
      </van-row>
    </div>
    <div class="footer">
      <van-button class="return" @click="goHome()" block plain>返回</van-button>
    </div>
  </div>
</template>

<script>
import { getAllProductList } from "../../api/hotelApi.js";
import { getRoomType } from "../../api/roomApi.js";
import { getServeType } from "../../api/ServeApi.js";
import TopBack from "../../components/TopBack";
export default {
  components: {
    TopBack,
  },
  data() {
    return {
      hotelName: "",
      adress: "",
      roomName: "",
      serveName: [],
      breakfast: "",
      wifi: "",
      smoke: "",
      username: "",
      usertel: "",
      money: "",
      time: "",
      datJson: {},
      shuju: {},
      payOrno: "false",
      tuikuan: false,
    };
  },
  created() {
    // console.log(this.$route.query);
    this.hotelId = this.$route.query.hotelId;
    this.roomId = this.$route.query.roomId;
    this.username = this.$route.query.username;
    this.usertel = this.$route.query.usertel;
    this.money = this.$route.query.money;
    this.time = this.$route.query.thisTime;
    this.start = this.$route.query.start;
    this.end = this.$route.query.end;
    this.sum = this.$route.query.sum;
    this.payOrno = this.$route.query.payOrno;
    this.tuikuan = this.$route.query.tuikuan;
    // console.log(this.payOrno,typeof(this.payOrno));
  },
  methods: {
    // 返回
    goHome() {
      // console.log( this.tuikuan);
      // this.tuikuan=Boolean(this.tuikuan)
      this.tuikuan = false;
      let cartPro = {
        hotelId: this.hotelId,
        roomId: this.roomId,
        username: this.username,
        usertel: this.usertel,
        money: this.money,
        time: this.time,
        start: this.start,
        end: this.end,
        sum: this.sum,
        payOrno: true,
        tuikuan: this.tuikuan,
      };
      // console.log(cartPro.tuikuan,typeof(cartPro.tuikuan));
      // console.log(cartPro);
      this.$store.commit("addCart", cartPro);
      this.$router.push({ path: "/botnav/home" });
    },
    //取消订单
    nofind() {
      this.$dialog
        .confirm({
          title: "取消订单",
          message: "确认取消订单吗？",
        })
        .then(() => {
          this.$store.commit("removeCart", this.$route.query);
          this.$router.push({ path: "/botnav/home" });
        });
    },
    // 退款
    refund() {
      this.$dialog
        .confirm({
          title: "退款",
          message: "确认退款吗？",
        })
        .then(() => {
          this.$store.commit("removeCart", this.$route.query);
          this.tuikuan = true;
          let cartPro = {
            hotelId: this.hotelId,
            roomId: this.roomId,
            username: this.username,
            usertel: this.usertel,
            money: this.money,
            time: this.time,
            start: this.start,
            end: this.end,
            sum: this.sum,
            payOrno: true,
            tuikuan: this.tuikuan,
          };
          this.$store.commit("addCart", cartPro);
          this.$router.push({ path: "/botnav/home" });
        });
    },
    //  付款
    payyes() {
      this.$router.push({
        path: "/pay",
        query: {
          hotelId: this.hotelId,
          roomId: this.roomId,
          money: this.money,
          username: this.username,
          usertel: this.usertel,
          start: this.start,
          end: this.end,
          sum: this.sum,
        },
      });
    },
  },
  mounted() {
    getAllProductList().then((res) => {
      let hotel = res.data;
      hotel = hotel.filter((item) => item.hotelId == this.hotelId);
      this.hotelName = hotel[0].name;
      this.adress = hotel[0].adress;
    });
    getRoomType().then((res) => {
      let room = res.data;
      room = room.filter((item) => item.roomId == this.roomId);
      this.roomName = room[0].roomType;
    });
    getServeType().then((res) => {
      let serve = res.data;
      serve = serve.filter((item) => item.serviceId == this.roomId);
      this.serveName = serve[0];
      if (this.serveName.breakfast == "0") {
        this.breakfast = "有";
      } else {
        this.breakfast = "没有";
      }
      if (this.serveName.wifi == "0") {
        this.wifi = "有";
      } else {
        this.wifi = "没有";
      }

      if (this.serveName.smoke == "0") {
        this.smoke = "有";
      } else {
        this.smoke = "没有";
      }
    });
  },
};
</script>

<style lang="less" scoped>
.app {
  height: 100%;
  background-color: #f5f6f8;
}
.top {
  background-color: #033e98;
  font-size: 14px;
  color: #fff;
  .yuding {
    margin: 10px;
    padding-bottom: 10px;
    .van-button {
      height:30px;
      text-align: center;
      border-radius: 20px;
      margin-left:20px;
      span {
        color: #000;
        font-size: 14px;
        font-weight: bolder;
      }
    }
  }
}
.money {
  background-color: #fff;
  font-size: 16px;
  padding: 3%;
}
.fapiao {
  background-color: #fff;
  font-size: 15px;
  margin: 5px 0;
  padding: 3%;
}
.pay {
  color: #838383;
  height: 25px;
  line-height: 25px;
}
.hotelName {
  background-color: #fff;
  font-size: 15px;
  margin: 5px 0;
  padding: 3%;
  .title {
    font-size: 16px;
  }
  p {
    font-size: 12px;
  }
  .tubiao {
    padding: 0 10%;
    font-size: 14px;
    img {
      width: 20px;
      height: 20px;
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
    }
  }
}
.serve {
  background-color: #fff;
  font-size: 16px;
  .servesmill {
    margin-top: 5px;
  }
}
.message {
  background-color: #fff;
  margin: 5px 0;
  padding: 3%;
  font-size: 14px;
  p {
    font-size: 16px;
    margin: 10px 0;
  }
}
.serve {
  background-color: #fff;
  font-size: 18px;
  margin: 5px 0;
  padding: 3%;
  .servesmill {
    margin-top: 5px;
  }
}
.message {
  background-color: #fff;
  margin: 5px 0;
  padding: 3%;
  font-size: 16px;
  p {
    font-size: 18px;
  }
}

// .footer {
//   margin: 0 8%;
//   padding: 20px 0;

.footer {
  margin: 0 8%;
  padding: 10px 0;
}
.return {
  color: #fff;
  background-color: #033e98;
}
.jiange{
  padding-left: 50px;
}
</style>
